<template>
  <div id="index">
    <com-head :opacity="0">肖汉伯书城</com-head>
    <div class="index">
      <div class="indexbg"></div>
      <div class="lunbo">
        <mt-swipe :auto="3000">
          <mt-swipe-item v-for="(item1,index) in images" :key="index">
            <img :src="item1.pic">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="index_nav">
        <div
          class="nav_item"
          v-for="item2 in navList"
          :key="item2.name"
          @click="navRoute(item2.route)"
        >
          <div class="box">
            <img :src="item2.img" alt>
          </div>
          <span>{{ item2.name }}</span>
        </div>
      </div>
    </div>
    <div class="sellwell">
      <div class="sellTop">
        <span>畅销推荐</span>
        <router-link :to="'bookMall'" tag="span">更多></router-link>
      </div>
      <!-- 书籍 -->
      <div
        class="bookList"
        v-for="item3 in bookList"
        @click="buybook(item3.book_id)"
        :key="item3.book_id"
      >
        <div class="left">
          <img :src="item3.image">
        </div>
        <div class="right">
          <div class="name">{{item3.name}}</div>
          <div class="abstract1" v-html="item3.book_sign"></div>
          <!-- <div class="pagenum">共{{item.num}}章</div> -->
        </div>
      </div>
      <!-- 电子书 -->
      <div
        class="bookList"
        v-for="item4 in ebookList"
        @click="bookdetail(item4.book_id)"
        :key="item4.cover"
      >
        <div class="left">
          <img :src="item4.cover">
        </div>
        <div class="right">
          <div class="name">{{item4.name}}</div>
          <div class="abstract1">{{item4.book_sign}}</div>
          <div class="pagenum">共{{item4.number}}章</div>
        </div>
      </div>
    </div>

    <div class="sellwell author" @click="loading2">
      <div class="sellTop">
        <span>作者介绍</span>
      </div>
      <div class="bookList authormes">
        <div class="name">{{author.name}}</div>
        <div class="left">
          <img :src="author.auth_pic">
        </div>
        <div class="right">
          <div>{{author.auth_site}}</div>
          <div class="abstract">{{author.auth_sign}}</div>
        </div>
      </div>
    </div>

    <!-- 相册 -->
    <div class="mask" v-if="mask">
      <div class="box1">
        <mt-swipe :auto="3000">
          <mt-swipe-item v-for="(item,index) in authorimg" :key="index">
            <img :src="item.image">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="box2" @click="mask=false">
        <i class="iconfont icon-guanbi"></i>
      </div>
    </div>
    <com-foot :select="0"></com-foot>

    <!-- <com-button :click="fabu">确定发布</com-button> -->
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      mask: false,
      images: [],
      ebookList: [],
      bookList: [],
      author: {},
      authorimg: [],
      navList: [
        // 导航信息
        {
          img: require("../assets/image/nav1.png"),
          name: "书城",
          route: "/bookMall"
        },
        {
          img: require("../assets/image/nav2.png"),
          name: "我的书架",
          route: "/bookShelf"
        },
        {
          img: require("../assets/image/nav3.png"),
          name: "立即充值",
          route: "/Recharge"
        },
        {
          img: require("../assets/image/nav4.png"),
          name: "邀请",
          route: "/invitingFriends"
        }
      ]
    };
  },

  computed: {},
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.IsWechat()) {
        if (!vm.getCookie("openid")) {
          vm.loadingurl();
        } else {
          next();
        }
      } else {
        vm.$bus.$emit("toast", "请在微信浏览器中打开");
      }
    });
  },
  created() {
    // if (this.IsWechat()) {
    //   // this.$bus.$emit("toast", "是微信浏览器");
    //   console.log(this.getCookie("openid"));
    //   if (!this.getCookie("openid")) {
    //     console.log("跳转");
    //    this.loadingurl();
    //     // https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6369205e9b2dd4e6&redirect_uri=http://xiaoshuo.cadhx.com/login/set_openid&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
    //     var openid = this.getUrlKey("openid");
    //     console.log("openid" + openid);
    //     if (!this.getCookie("openid")) {
    //       this.setCookie("openid", openid, 3000);
    //     } else {
    //       this.delCookie("openid");
    //       this.setCookie("openid", openid, 3000);
    //     }
    //   }
    // } else {
    //   this.$bus.$emit("toast", "请在微信浏览器中打开");
    // }
  },

  mounted() {
    this.loading1();
    this.loadimage();
    this.loading();
  },

  methods: {
    // 获取url,保存openid
    loadingurl() {
      this.axios
        .post("login/url")
        .then(({ data }) => {
          console.log(data);
          //window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6369205e9b2dd4e6&redirect_uri=http://xiaoshuo.cadhx.com/api/login/set_openid&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
          if (!this.getCookie("openid")) {
            window.location.href = data.url;
            var openid = this.getUrlKey("openid");
            if (!this.getCookie("openid")) {
              this.setCookie("openid", openid, 3000);
            } else {
              this.delCookie("openid");
              this.setCookie("openid", openid, 3000);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loadingurl2() {
      this.axios
        .post("login/url")
        .then(({ data }) => {
          console.log(data);
          window.location.href = data.url;
          var openid = this.getUrlKey("openid");
          if (!this.getCookie("openid")) {
            this.setCookie("openid", openid, 3000);
          } else {
            this.delCookie("openid");
            this.setCookie("openid", openid, 3000);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loading() {
      const patented_id = this.getUrlKey("patented_id");
      // alert('patented_id:'+ patented_id);
      // alert('openid:'+ this.getCookie("openid"));
      // localStorage.setItem("patented_id", patented_id);
      // alert('1:'+ !patented_id);
      if (!patented_id) {
        this.getCookie("patented_id");
      } else {
        this.setCookie("patented_id", patented_id, 3000);
      }
      this.axios
        .post("index/index", {
          patented_id: this.getCookie("patented_id"),
          openid: this.getCookie("openid")
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            // alert('2:'+this.getCookie("patented_id"));
            // alert('3:'+data.data);
            // localStorage.removeItem("patented_id");
            this.bookList = data.data;
            this.ebookList = data.ebooks;
            if (localStorage.token) {
              localStorage.removeItem("token");
              localStorage.setItem("token", data.token);
            } else {
              localStorage.setItem("token", data.token);
            }
          } else if (data.code === "201") {
            this.bookList = data.data;
            this.ebookList = data.ebooks;
            if (localStorage.token) {
              localStorage.removeItem("token");
              localStorage.setItem("token", data.token);
            } else {
              localStorage.setItem("token", data.token);
            }
            this.$bus.$emit("toast", data.msg);
          } else if (data.code === "205") {
            this.$bus.$emit("toast", "暂无数据");
          } else if (data.code === "204") {
            this.loadingurl2();
            // this.$bus.$emit("toast", data.msg);
          } else if (data.code === "300") {
            this.delCookie("patented_id");
            this.bookList = data.data;
            this.ebookList = data.ebooks;
            if (localStorage.token) {
              localStorage.removeItem("token");
              localStorage.setItem("token", data.token);
            } else {
              localStorage.setItem("token", data.token);
            }
            // this.$bus.$emit("toast", data.msg);
          } else if (data.code === "400") {
            this.delCookie("patented_id");
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 作者信息
    loading1() {
      this.axios
        .post("index/auth")
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.author = data.data;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 作者相册
    loading2() {
      this.mask = true;
      this.axios
        .post("index/pics")
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.authorimg = data.data;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loadimage() {
      this.axios
        .post("index/pic")
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.images = data.data;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    buybook(id) {
      //实体书
      this.$router.push({ name: "buy", query: { id: id } });
    },
    bookdetail(id) {
      //实体书
      this.$router.push({ name: "ebookDetail", query: { id: id } });
    },
    navRoute(route) {
      this.$router.push({ path: route });
    },
    getUrlKey: function(name) {
      //获取url 参数
      return decodeURIComponent(
        (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
          window.location.href
        ) || [, ""])[1].replace(/\+/g, "%20")
      );
    }
  }
};
</script>
<style lang='scss'>
#index {
  width: 750px;
  #pageHead {
    box-shadow: none;
    .gone {
      display: none;
    }
  }
  .index {
    height: 510px;
    background: #fff;
    position: relative;
    .indexbg {
      height: 175px;
      background: #41d7bd;
    }
    .lunbo {
      width: 686px;
      height: 280px;
      border-radius: 10px;
      position: absolute;
      bottom: 200px;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
      .mint-swipe-indicator {
        width: 10px;
        height: 12px;
        background: rgba(153, 153, 153, 1);
      }
      .is-active {
        background: #fff;
      }
      img {
        width: 100%;
      }
    }
    .index_nav {
      width: 100%;
      margin-top: 150px;
      height: 200px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .nav_item {
        width: 25%;
        text-align: center;
        .box {
          width: 80px;
          height: 80px;
          margin: 0 auto;
          img {
            width: 100%;
          }
        }
        span {
          font-size: 26px;
          line-height: 40px;
        }
      }
    }
  }
  .sellwell {
    margin-top: 20px;
    background-color: #fff;
    padding: 0 32px;
    .sellTop {
      display: flex;
      color: #41d7bd;
      justify-content: space-between;
      align-content: center;
      line-height: 84px;
      position: relative;
      span {
        color: #333333;
      }
      span:nth-of-type(1) {
        font-weight: 700;
      }
      &:after {
        content: "";
        height: 28px;
        width: 2px;
        background: #555;
        position: absolute;
        left: -8px;
        top: 27px;
      }
    }
    .bookList {
      height: 340px;
      border-bottom: 1Px solid #f6f6f6;
      display: flex;
      justify-content: space-between;
      .left {
        width: 200px;
        height: 260px;
        border-radius: 6px;
        margin-top: 40px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 458px;
        height: 240px;
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 26px;
        color: rgba(153, 153, 153, 1);
        .name {
          color: #222;
          font-size: 30px;
        }
        .abstract1 {
          // height: 200px;
          line-height: 40px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .abstract {
          // height: 200px;
          line-height: 40px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
          overflow: hidden;
        }
      }
    }
  }
  .author {
    margin-top: 20px;
    background-color: #fff;
    padding: 0 32px;
    .sellTop {
      display: flex;
      color: #41d7bd;
      justify-content: space-between;
      align-content: center;
      line-height: 84px;
      position: relative;
      span {
        color: #333333;
      }
      span:nth-of-type(1) {
        font-weight: 700;
      }
      &:after {
        content: "";
        height: 28px;
        width: 2px;
        background: #555;
        position: absolute;
        left: -8px;
        top: 27px;
      }
    }
    .authormes {
      height: 390px;
      background: url("../assets/image/bookbg.png") no-repeat;
      background-size: contain;
      position: relative;
      .name {
        font-weight: 700;
        position: absolute;
        top: 40px;
        left: 30px;
      }
      .left {
        width: 132px;
        height: 190px;
        border-radius: 6px;
        margin-top: 40px;
        position: absolute;
        top: 85px;
        left: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 370px;
        height: 250px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #222;
        font-size: 24px;
        position: absolute;
        top: 30px;
        right: 45px;
      }
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(100vh);
    z-index: 50;
    background: rgba(4, 4, 15, 0.4);
    .mint-swipe {
      z-index: 51;
    }
    .box1 {
      margin: 25vh auto;
      width: 70vw;
      height: 10vh;
      min-height: 50vh;
      border-radius: 10px;
      // background-color: rgb(175, 36, 36);
      img {
        width: 100%;
        overflow-y: scroll;
      }
    }
    .box2 {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      position: fixed;
      top: 200px;
      right: 60px;
      color: #fff;
      .iconfont {
        font-size: 60px;
      }
    }
  }
}
</style>